<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { deleteCdnGroupApi, getCdnGroupListApi } from '@/apis/modules/cdn'
import { commonTableProps } from '@/utils/table'
import EditorDialog from './dialogs/EditorDialog.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()

const queryParams = ref({
  keyword: '',
})
const route = useRoute()
const router = useRouter()
const {
  loading,
  data: tableData,
  pagination,
  run,
} = useListRequest(getCdnGroupListApi, {
  params: queryParams,
  immediate: true,
})

const {
  visible: editorDialogVisible,
  open: openEditorDialog,
  data: editorDialogData,
} = usePopup()

// const {
//   visible: nodeVisible,
//   open: openNode,
//   data: nodeData,
//   loading: nodeLoading,
//   record: nodeRecord,
//   pagination: nodePagination,
//   run: nodeRun,
// } = usePopupPreGetData(getCdnClusterNodeListApi)

// const {
//   visible: siteVisible,
//   open: openSite,
//   data: siteData,
//   loading: siteLoading,
//   record: siteRecord,
//   pagination: sitePagination,
//   run: siteRun,
// } = usePopupPreGetData(getCdnClusterSiteListApi)

// 删除分组
function handleDelete(record: any) {
  ModalHelper.error({
    title: '删除分组',
    content: `确定要删除 “${record.name}” 分组吗？`,
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteCdnGroupApi({ id: record.id })
      await run()
      Message.success('删除成功')
    },
  })
}

// function handleBeforeChange(row: any, status: 1 | 2) {
//   return updateCdnClusterStatusApi({ id: row.id!, status }).then(() => {
//     Message.success('操作成功')
//     row.status = status
//     run()
//   })
// }

const { createSortChange } = useTable(run, tableData)
const onSorterChange = createSortChange(queryParams)

const data = [
  { name: '分组-A-1', number: 0 },
  { name: '分组-C-1', number: 12 },
  { name: '分组-D', number: 3 },
]

const typeOptions = [
  {
    label: '边缘组',
    value: 1,
  },
  {
    label: '上游组',
    value: 2,
  },
]

const originStrategyOptions = [
  {
    label: '直接回源',
    value: 1,
  },
  {
    label: '上游回源',
    value: 2,
  },
]
function handleReload(flag: boolean) {
  if (flag)
    return run()
  router.replace({ name: 'CdnGroupManagement' })
  run()
}
onMounted(() => {
  if (route.query.type === 'open') {
    openEditorDialog()
  }
})
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditorDialog()"
        >
          新建分组
        </a-button>
        <a-input-search
          v-model="queryParams.keyword"
          placeholder="请输入分组名称搜索"
          class="!w-58"
          @change="run()"
          @search="run()"
        />
        <!-- <multiple-condition-search
          v-model="queryParams"
          :schema="searchSchema"
          @search="run"
        /> -->
      </div>
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSorterChange"
    >
      <template #type="{ record }">
        <div class="flex items-center gap-x-1 leading-5">
          {{ getOptionsLabel(typeOptions, record.type) }}
        </div>
      </template>
      <template #source_type="{ record }">
        <div class="flex items-center gap-x-1 leading-5">
          {{ getOptionsLabel(originStrategyOptions, record.origin_strategy) }}
          <a-popover
            v-if="record.origin_strategy === 2"
            position="right"
            trigger="hover"
            background-color="#fff"
            :show-arrow="false"
            :arrow-style="{
              'border-left': '1px solid #EEEFF2',
              'border-bottom': '1px solid #EEEFF2',
              'z-index': 100,
              'display': 'none',
            }"
            :content-style="{
              'border': '1px solid #F2F3F5',
              'padding': '4px',
              'box-shadow':
                '0 4px 6px - 1px rgba(0, 0, 0, 0.10), 0 2px 4px - 2px',
              'border-radius': '8px',
              /* shadow-md */
            }"
          >
            <template #content>
              <div
                v-if="data.length > 0"
                class="source-type-table"
              >
                <div class="source-type-table-th">
                  <div>分组名称</div>
                  <div>节点数量</div>
                </div>
                <div class="source-type-table-body">
                  <div
                    v-for="(i, index) in record.upstreams"
                    :key="index"
                    class="source-type-table-row"
                  >
                    <div class="source-type-name">
                      {{ i.name || '-' }}
                    </div>
                    <div class="source-type-number">
                      {{ i.node_count || 0 }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- <get-ip
                v-model:ips="formState.ips"
                :report-ips="formState?.report_ip"
                @validate-ip="handleValidateIp"
              /> -->
            </template>
            <div class="node-ip-label">
              <i-icons-base-info
                class="table-icon"
                size="16px"
              />
            </div>
          </a-popover>
        </div>
      </template>

      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditorDialog(record)"
        >
          <i-icons-edit size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          :disabled="record.status === 1"
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <editor-dialog
    v-model:visible="editorDialogVisible"
    :record="editorDialogData"
    @reload="handleReload"
  />
  <!-- <node-details
    v-if="nodeVisible"
    v-model:visible="nodeVisible"
    v-model:data="nodeData"
    v-model:pagination="nodePagination"
    :record="nodeRecord"
    :loading="nodeLoading"
    :run="nodeRun"
  />
  <site-details
    v-if="siteVisible"
    v-model:visible="siteVisible"
    v-model:data="siteData"
    v-model:pagination="sitePagination"
    :record="siteRecord"
    :loading="siteLoading"
    :run="siteRun"
  /> -->
</template>

<style lang="less" scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}

:deep(.arco-popover-popup-content) {
  padding: 0;
}

.source-type-table {
  min-width: 200px;
  max-height: 422px;
  overflow: auto;
  .source-type-table-th {
    display: flex;
    height: 32px;
    padding: 0 8px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    color: var(--text-3, #86909c);
    text-overflow: ellipsis;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
  }
  .source-type-table-body {
    max-height: 240px;
    overflow-y: auto;
  }
  //padding-right: 14px;
  .source-type-table-row {
    display: flex;
    width: 200px;
    align-items: flex-start;
    display: flex;
    display: flex;
    //height: 32px;
    padding: 0 8px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    .source-type-name {
      display: flex;
      padding: 0px 0px;
      align-items: center;
      color: var(--text-1, #1d2129);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      /* 166.667% */
    }

    .source-type-number {
      display: flex;
      padding: 8px 0px;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      font-size: 14px;
      line-height: 22px;
      /* 157.143% */
    }
  }
}
</style>
